<template>
  <el-dialog class="custom-dialog" :visible.sync="dialogFormVisible" :append-to-body="true" :close-on-click-modal="false" @close="close"
             @open="open">
    <div slot="title">
      <div style="color:#fff">{{title}}</div>
    </div>
    <div>
      <el-card body-style="padding:10px;width:100%" style="width:100%">
        <div class="flex-wrap">
          <div>
            <el-form :inline="true" :model="formInline" style="margin-bottom: -20px">
              <el-form-item label="设备名称">
                <el-input v-model.trim="formInline.name" placeholder="设备名称" @keydown.native.enter="onSubmit" clearable></el-input>
              </el-form-item>
              <el-form-item label="设备类型">
                <el-select v-model="formInline.type" placeholder="请选择类型" clearable>
                  <el-option v-for="item in iotTypeOptions" :key="item.dictCode" :label="item.dictLabel" :value="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit" :loading="queryStatus">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div style="width:100%;flex:1;display:flex;justify-content:flex-end">
            <el-button type="primary" @click="onBinding">绑定</el-button>
          </div>
        </div>
      </el-card>
      <el-card :style="{marginTop:'10px',width:'100%',height:mainCardHeight+'px'}" v-loading="tableLoading">
        <el-table
          ref="iotMultipleTable"
          :max-height="mainCardHeight-32"
          :data="iotTableData"
          style="width: 100%;border:1px solid #e0e0e0"
          :header-cell-style="tableHeaderColor"
          :row-class-name="tableRowClassName"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="50"
          />
          <el-table-column
            prop="name"
            show-tooltip-when-overflow
            label="设备名称">
          </el-table-column>
          <el-table-column
            prop="model"
            show-tooltip-when-overflow
            label="设备型号">
          </el-table-column>
          <el-table-column
            prop="enterpriseName"
            show-tooltip-when-overflow
            label="企业名称">
          </el-table-column>
          <el-table-column
            label="设备位置">
            <template slot-scope="scope">
              <div>
                <div>{{scope.row.locationEw}}EW</div>
                <div>{{scope.row.locationNs}}NS</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="typeName"
            label="设备类型">
          </el-table-column>
          <el-table-column
            width="80"
            label="状态">
            <template slot-scope="scope">
              <el-tag type="danger" v-show="scope.row.untitled==1">异常</el-tag>
              <el-tag type="success" v-show="scope.row.untitled!=1">正常</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="accessTime"
            show-tooltip-when-overflow
            label="接入时间">
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </el-dialog>
</template>
<script>
    import {
        iotTypeList,
        editBindingMass,
        queryEditBindingMass
    } from '@/api/material'
  export default {
      data(){
          return {
              landId:null,
              queryStatus:false,
              tableLoading:false,
              mainCardHeight:500,
              dialogFormVisible: false,
              title:"绑定设备",
              formInline: {
                  name: '',
                  type: ''
              },
              iotTypeOptions:[],
              iotCheckList:[],
              iotTableData:[]
          }
      },

      methods: {
          show(landId){
              this.landId = landId
              this.dialogFormVisible = true
              this.getTableList()
          },
          async getTableList(){
              this.tableLoading = true
              this.iotTableData = []
              const response = await queryEditBindingMass(this.landId,this.formInline.name, this.formInline.type)
              let {code,data} = response.data
              if(code==200){

              }
              this.iotTableData = data
              console.log("response.data",response.data)
              this.tableLoading = false
          },
          onSubmit(){
              this.getTableList(this.landId)
          },
          onBinding(){
              if(this.iotCheckList==null || this.iotCheckList.length==0){
                  this.$message.warning("至少选择一个设备")
                  return
              }
              const ids = this.iotCheckList.map(item=>{
                  return item.id
              })
              this.bindFacilityByIds(ids.toString())
          },
          open() {
              this.getTypeList()
          },
          close() {

          },
          async getTypeList(){
              const response = await iotTypeList()
              const {code, rows, msg} = response.data
              if(code==200){
                  this.iotTypeOptions = rows
              }else{
                  this.$message({type:"error",message: msg})
              }
          },
          async bindFacilityByIds(ids){
              const loading = this.$load(this)
              const response = await editBindingMass(this.landId, ids)
              const {code, msg} = response.data
              if(code==200){
                  this.$emit("updateTable")
                  this.dialogFormVisible = false
                  this.$message({type:"success", message: msg})
              }else{
                  this.$message({type:"error", message: msg})
              }
              loading.close()
          },
          handleSelectionChange(val) {
              this.iotCheckList = val
          },
          // 设置表头样式
          tableHeaderColor({row, column, rowIndex, columnIndex}) {
              return 'background-color: #009865;color: #000;font-weight: 500;'
          },
          // 设置斑马样式
          tableRowClassName({row, rowIndex}) {
              if (rowIndex % 2 === 0) {
                  return 'columns-row-a';
              } else if (rowIndex % 2 === 1) {
                  return 'columns-row-b';
              }
          }
      }
  }
</script>
<style>
  .el-table .columns-row-a {
    background: #f1faf7;
  }

  .el-table .columns-row-b {
    background: #ffffff;
  }
</style>
<style scoped>
  .flex-wrap {
    display: flex;
    align-items: center;
  }
  .custom-dialog >>> .el-dialog {
    width: 900px !important;
    position: relative;
  }

  .custom-dialog >>> .el-dialog__header {
    background: #009865;
    padding: 10px 10px 10px;
  }

  .custom-dialog >>> .el-dialog__headerbtn {
    top: 9px !important;
    right: 10px !important;
  }

  .custom-dialog >>> .el-dialog__body {
    line-height: 0px !important;
  }
</style>
